vscode 扩展插件开发

2023-06-29 02:21| 来源: 网络整理| 查看: 265

概述

行文内容包括以下几点：

15 分钟快速搭建一个最简单的 vscode 插件环境和代码了解如何将开发好的插件发布到 vscode 的插件市场快速浏览 vscode 插件开发的相关 API 安装工具 # 安装需要的包 npm install -g yo generator-code # 安装发布工具 npm install -g vsce 复制代码 hello world 初始化项目 # 执行以下命令 yo code 复制代码

基本上一路往下点就 ok

调试插件

按 F5 启动调试，在调试界面再按 F1 执行该插件定义的命令

解读 extension.ts

extension.ts 文件是 vscode 插件的入口文件

PS：你通过“初始化项目”生成的 extension.ts 里面应该都是英文注释，以下简单翻译了一下

import * as vscode from 'vscode'; /** * 一旦你的插件激活，vscode会立刻调用下述方法 * 只会在你的插件激活时执行一次 */ export function activate(context: vscode.ExtensionContext) { // 注册一个命令，当该命令被执行时，弹出提示框 let disposable = vscode.commands.registerCommand('hello-world-vscode.helloWorld', () => { vscode.window.showInformationMessage('Hello World from hello-world-vscode!'); }); // 监听上面注册的命令 context.subscriptions.push(disposable); } // this method is called when your extension is deactivated export function deactivate() {} 复制代码 package.json 部分字段解释 { "name": "hello-world-vscode", // 插件名 "displayName": "hello-world-vscode", // 显示在应用市场的名字 "description": "", // 插件描述 "version": "0.0.1", // 插件的版本号 "engines": { // 最低支持的vscode版本 "vscode": "^1.64.0" }, "categories": [ "Other" ], // 激活事件组，用来定义插件在什么时候被激活 "activationEvents": [ "onCommand:hello-world-vscode.helloWorld" ], // 插件的主入口文件(PS：因为刚刚选了使用 webpack 打包，所有入口是打包出来的文件) "main": "./dist/extension.js", // 贡献点这个比较重要，基本所有配置都在这里，保存通过哪些命令触发插件、插件配置信息等等 // 详情可参考官方文档：https://code.visualstudio.com/api/references/contribution-points "contributes": { "commands": [ { "command": "hello-world-vscode.helloWorld", "title": "Hello World" } ] }, "scripts": { 。。。 }, "devDependencies": { 。。。 } } 复制代码发布插件

PS：按以下步骤尝试前请先对照日期，如果已经隔了好几年，可能下文相关网页的呈现会有偏差。如果出现偏差，最好还是对照官方文档解决问题

先去 azure 创建账号

azure

登录完点击以下链接，或者再次访问 azure